<template>
  <div class="container">
    <div class="address">
      <img src="../../assets/images/footer_logo.png" alt="">
      <ul>
        <li>电话：010-64785698</li>
        <li>地址：北京市朝阳区望京东园四区浦项中心B座19层</li>
        <li>邮编：100102</li>
      </ul>
    </div>
    <div class="conList" :class="`con${item.name}`" v-for="(item,index) in column" :key="index">
      <h2>{{item.title}}</h2>
      <ul :class="item.name">
        <li v-for="(it,i) in item.children" :key="i">{{it.title}}</li>
      </ul>
    </div>
    <div class="rq-code">
      <img src="../../assets/images/code.png" alt="">
      <p>关注微信公众号</p>
    </div>
  </div>
</template>

<script>
export default {
  name: '',

  data() {
    return {
      column: [
        {
          title: '明星产品', name: 'product', children: [
            { title: "一站式数据分析平台", url: "1" },
            { title: "自助式数据分析平台", url: "2" },
            { title: "智能数据问答平台", url: "3" },
            { title: "智能数据治理平台", url: "4" },
          ]
        },
        {
          title: '行业案例', name: 'case', children: [
            { title: "税务", url: "1" },
            { title: "财政", url: "2" },
            { title: "全融", url: "3" },
            { title: "保险", url: "4" },
            { title: "电力", url: "5" },
            { title: "司法", url: "6" },
            { title: "卫生", url: "7" },
            { title: "通信", url: "8" },
            { title: "教育", url: "9" },
            { title: "企业", url: "10" },
            { title: "药监", url: "11" },
            { title: "制造", url: "12" },
          ]
        },
        {
          title: '行业资讯', name: 'consult', children: [
            { title: "商业智能", url: "1" },
            { title: "数据分析", url: "2" },
            { title: "报表工具", url: "3" },
            { title: "数据治理", url: "4" },
          ]
        },
        {
          title: '服务方式', name: 'service', children: [
            { title: "商业智能", url: "1" },
            { title: "数据分析", url: "2" },
            { title: "报表工具", url: "3" },
            { title: "数据治理", url: "4" },
          ]
        },
      ]
    }
  },
  methods: {

  },
  mounted() {

  },
  watch: {

  },
  computed: {

  },
  filters: {

  }
}
</script>

<style scoped lang='less'>
.container {
  margin-top: 70px;
  width: 1200px;
  margin: 0 auto;
  height: 262px;

  opacity: 1;
  display: flex;
  padding-top: 50px;
  .conList {
    color: #ffffff;
    opacity: 0.8;
    margin-left: 58px;
    overflow: hidden;
    font-size: 14px;
    h2 {
      font-size: 16px;
      color: #ffffff;
      margin-bottom: 16px;
    }
    .case {
      li {
        float: left;
        width: 50px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
      }
    }
    .consult {
      li {
        height: 30px;
        line-height: 30px;
        cursor: pointer;
      }
    }
    .service {
      li {
        height: 30px;
        line-height: 30px;
        cursor: pointer;
      }
    }
    .product {
      li {
        height: 30px;
        line-height: 30px;
        cursor: pointer;
      }
    }
  }
  .concase {
    width: 150px;
  }
  .rq-code {
    font-size: 16px;
    color: #ffffff;
    margin-left: 130px;
    img {
      width: 109px;
      height: 108px;
      margin-top: 6px;
      margin-bottom: 12px;
    }
  }
  .address {
    ul {
      margin-top: 6px;
      li {
        color: #ffffff;
        opacity: 0.52;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
}
</style>